<template>
  <div>
    <TableForm :options="options" :tableData="tableData" :columns="columns" :pagination="pagination"
     @handleSelectionChange="handleSelectionChange" @handleSizeChange="handleSizeChange" 
     @handleCurrentChange="handleCurrentChange" :btnList="btnList" :searchForm.sync="searchForm" :formConfig="formConfig"></TableForm>
    <SiteAdd v-show="addShow" :addShow="addShow" @closeAddDialog="closeAddDialog"></SiteAdd>
    <SiteEdit v-show="editShow" :editShow="editShow" @closeEditDialog="closeEditDialog"></SiteEdit>

  </div>
</template>

<script>
import TableForm from '@/components/Table'
import { siteList, nameCnList, nameEnList, siteSiteList, siteStatusSwitch  } from '@/api/manage/site.js'
import { setSearchParams } from '@/utils/index.js'
import { SiteAdd, SiteEdit } from './components'
export default {
  components:{ TableForm, SiteAdd, SiteEdit },
  data() {
    return {
      options:{
        selection:true,
        rowClassName:function({row}){
          if(!row.status){
            return 'unchecked'
          }
        }
      },
      columns:[
        {prop: "icon",label: "图标",align: "center", width:'',
        formatter:(index,row) =>{
          console.log(row)
          return `<img src=` + row.icon +`>`
        }},
        {prop: "name_cn",label: "国家中文名称", width:'200'},
        {prop: "name_en",label: "国家英文名称", width:'200'},
        {prop: "site",label: "站点", width:'200'},
        {prop: "status",label: "启用状态", width:'200', opretes:[{
          id:'1',
          class: 'warning',
          show: true,
          disabled: false,
          type:'switch',
          method: (index, row) => {
            this.handleSwitch(index, row)
          }
        }]},
        {prop: "create_name",label: "创建人", width:'200'},
        {label: "操作", width:'200',className: "options",opretes:[{
          id:'2',
          label: '编辑',
          class: 'spanEdit',
          show: true,
          type:"span",
          method: (index, row) => {
            console.log(index,row)
            this.handleEdit(index, row)
          }
        },
        {
          id:'3',
          label: '删除',
          class: 'spanDel',
          show: true,
          type:"span",
          disabled: false,
          method: (index, row) => {
            this.handleDel(index, row)
          }
        }]},
      ],
      tableData:[],
      pagination:{
        total: 150,
        pageSize: 10,
        page: 1
      },
      btnList:{
        left: [
          {
            id: 1,
            label: '添加',
            type: 'search',
            show: true,
            handleClick: this.addSite
          },
          {
            id: 2,
            label: '删除',
            show: true,
            type: 'del',
            handleClick: this.delSite
          },
          {
            id: 3,
            label: '导出',
            type: 'del',
            show: true,
            handleClick: this.exportSite
          }
        ],
        right: [
           {
            label: '查询',
            type: 'search',
            show: true,
            handleClick: this.getSiteList
          },
          {
            label: '重置',
            type: 'del',
            show: true,
            handleClick: this.resetForm
          },
        ]
      },
      formConfig:[
        {
          id: '1',
          type: 'select',
          name: 'name_cn',
          placeholder: '国家中文名称',
          options:[{
            label:"1212",
          }]
        },
        {
          id: '2',
          type: 'select',
          name: 'name_en',
          placeholder: '国家英文名称',
          options:[{
            label:"1212",
          }]
        },
        {
          id: '3',
          type: 'select',
          name: 'site',
          placeholder: '站点',
          options:[{
            label:"1212",
          }]
        }
      ],
      searchForm:{
        name_cn:{value:'',op:'LIKE'},
        name_en:{value:'',op:'LIKE'},
        site:{value:'',op:'LIKE'},
      },
      addShow: false,
      editShow: false
    }
  },
  created(){
    this.getSiteList()
    this.getNameCnList()
    this.getNameEnList()
    this.getSiteSiteList()
  },
  methods:{
    getSiteSiteList(){
      siteSiteList().then(res=>{
        this.formConfig[2].options = res.data
      })
    },
    getNameCnList(){
      nameCnList().then(res=>{
        this.formConfig[0].options = res.data
      })
    },
     getNameEnList(){
      nameEnList().then(res=>{
        this.formConfig[1].options = res.data
      })
    },
    getSiteList(){
      let params = setSearchParams(this.searchForm, this.pagination.pageSize, this.pagination.page)
      siteList(params).then(res=>{
        let list = res.data.data
        for(let i = 0; i < list.length; i++){
          if(list[i].status == 0){
            list[i].status = false
          }else{
            list[i].status = true
          }
        }
        this.tableData = list
        this.pagination.total = res.data.total
        console.log(res.data)
      })
    },
    // 删除
    handleDel(index, row){
      console.log(' handleDel:', row,index)
    },
    // 编辑按钮
    handleEdit (index, row) {
      console.log(' handleEdit:', row,index)
      this.closeEditDialog()
    },
    // 选中行
    handleSelectionChange (val) {
      console.log('handleSelectionChange:', val)
    },
    handleSizeChange(val){
      console.log('handleSizeChange:', val)
      this.pagination.pageSize = val
    },
    handleCurrentChange(val){
      console.log('handleCurrentChange:', val)
      this.pagination.page = val
    },
    handleSwitch(index, row){
      console.log(index, row)
    
      let params ={
        id: row.id,
        status: ""
      }
      if(row.status){
        params.status = 1
      }else{
        params.status = 0
      }
      siteStatusSwitch(params).then(res=>{
        console.log(res)
      })
    },
    // 重置按钮
    resetForm(){
      for(let item in this.searchForm){
        this.searchForm[item].value =""
      }
    },
    closeAddDialog(){
      this.addShow = !this.addShow
    },
    closeEditDialog(){
      this.editShow = !this.editShow
    },
    addSite(){
      console.log('添加站点')
      this.closeAddDialog()
    },
    delSite(){
      console.log('删除站点')
    },
    exportSite(){
      console.log('导出')
    }
  }
}
</script>

<style>

</style>